/* 
    我的页面
 */
<template>
    <div class="mineMain">
        <header>
            <!-- 登录 -->
            <div class="Login" v-if="user">
                <div class="loginTop">
                    <div class="loginInfo">
                        <van-image class="avator" round fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                        <span>SunPeng</span>
                    </div>
                    <van-button type="default">编辑资料</van-button>
                </div>
                <div class="loginBottom">
                    <div class="ebox">
                        <span>8</span>
                        <span>收藏</span>
                    </div>
                    <div class="ebox">
                        <span>8</span>
                        <span>收藏</span>
                    </div>
                    <div class="ebox">
                        <span>8</span>
                        <span>收藏</span>
                    </div>
                    <div class="ebox">
                        <span>8</span>
                        <span>收藏</span>
                    </div>
                </div>
            </div>

            <!-- 未登录 -->
            <div class="noLogin" @click="$router.push('/login')" v-else>
                <img src="" alt="">
                <span><i>登录</i>/<i>注册</i></span>
            </div>
        </header>

        <section>
            <van-grid :column-num="2" class="gridNav" clickable>
                <van-grid-item dot>
                    <i slot="icon" class="iconfont icon-shoucang"></i>
                    <span slot="text">收藏</span>
                </van-grid-item>
                <van-grid-item icon="photo-o" text="历史" badge="99+" />
            </van-grid>

            <van-cell title="设置" label="描述信息" clickable />
            <van-cell title="消息通知" icon="location-o" value="内容" is-link arrow-direction="down" />
            <van-cell is-link>
                <template #title>
                    <span class="custom-title">小智同学</span>
                    <van-tag type="danger">标签</van-tag>
                </template>
                <template #right-icon>
                    <van-icon name="search" class="search-icon" />
                </template>
            </van-cell>
            <van-button v-if="user" type="primary" block @click="handleLoginOut()">退出登录</van-button>
        </section>
    </div>
</template>

<script>
import { mapState } from 'vuex';//获取用户信息，判断是否登录

export default {
    name: 'Mine',
    data() {
        return {

        }
    },
    computed: {
        ...mapState(['user'])
    },
    created() {

    },
    methods: {
        // 退出登录
        handleLoginOut() {
            const that = this
            this.$dialog.confirm({
                message: '确认退出登录吗?'
            }).then(() => {
                // on confirm  清除登录状态(容器+本地)
                that.$store.commit('setUser', null)
            }).catch(() => {
                // on cancel
                console.log('取消登录')
            })
        },
    }
}
</script>

<style scoped lang="less">
.mineMain {
    width: 100%;
    height: 100%;

    header {
        width: 100%;
        height: 161px;
        color: #fff;
        font-size: 18px;
        background: #0F75F1;

        .noLogin {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            img {
                width: 60px;
                height: 60px;
                border: 1px solid #fff;
            }

            i {
                font-size: 20px;
            }
        }

        .Login {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .loginTop {
                height: 131px;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .loginInfo {
                    display: flex;
                    align-items: center;

                    .avator {
                        width: 60px;
                        height: 60px;
                        margin-right: 10px;
                        border: 1px solid #fff;
                    }
                }
            }

            .loginBottom {
                height: 80px;
                display: flex;

                .ebox {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                }
            }
        }
    }

    section {
        color: #000;
        font-size: 16px;

        .gridNav {
            i {
                color: #eb5253;
            }

            span {}
        }
    }
}
</style>